<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-time-picker disabled :placeholder="placeholder" size="default"></el-time-picker>
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-time-picker v-model="_value" :value-format="format" :placeholder="placeholder" size="default"/>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field readonly right-icon="arrow" clickable name="datetimePicker" v-model="_value" :placeholder="placeholder" @click="showPicker = true"/>
      <popup v-model:show="showPicker" position="bottom">
        <v-time-picker v-model="timeVal" :formatter="formatter" :columns-type="columnsType" title="选择时间" type="time" @confirm="onConfirm" @cancel="showPicker = false"/>
      </popup>
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script>
import { Field, Popup, TimePicker } from 'vant'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import { computed, reactive, toRefs } from 'vue'
const vTimePicker = TimePicker
const date = '2022-01-01 '

export default {
    name: 'TimePicker',
    mixins: [componentMinxins],
    components: { Field, Popup, vTimePicker },
    props: {
        modelValue: {
            default: null,
        },
        format: {
            type: String,
            default: 'HH:mm:ss',
        },
        placeholder: {
            type: String,
            default: '请选择时间',
        },
    },
    setup(props) {
        const { modelValue, format } = toRefs(props)
        const state = reactive({
            timeVals: [],
            showPicker: false,
        })
        const timeVal = computed({
            get: () => {
                return (modelValue.value || '').split(':')
            },
            set: val => {
                state.timeVals = val
            }
        })
        const columnsType = computed(() => {
            const result = []
            if (format.value.indexOf('HH')){
                result.push('hour')
            }else if(format.value.indexOf('mm')){
                result.push('minute')
            }else if(format.value.indexOf('ss')){
                result.push('second')
            }
        })
        const onConfirm = (val) => {
            state.showPicker = false
            _value.value = (val.selectedValues || []).join(':')
        }
        const formatter = (type, option) => {
            switch (type){
                case 'hour': option.text += ' 时'; break;
                case 'minute': option.text += ' 分'; break;
                case 'second': option.text += ' 秒'; break;
            }
            return option;
        }
        return {
            ...toRefs(state),
            timeVal,
            columnsType,
            onConfirm,
            formatter
        }
    }
}
</script>

<style>

</style>